<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>广场</title>
    <link rel="icon" type="images/x-icon" href="img/icons/favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/player.css">
    <link rel="stylesheet" href="css/square.css">
</head>
<body>
<!--头部 开始-->
<div class="SY-header pf">
    <div class="clearfix">
        <div class="SY-logo fl usn">
            <a href="UserCenter.html"><img src="img/icons/logo.png" alt="深夜学院"><span class="slogin">深夜研习社</span></a>
        </div>
        <div class="SY-search pa dib">
            <div class="inputField">
                <input type="text" class="SY-input tac" placeholder="请输入作者名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入作者名'">
                <a href="javascript:void(0);" class="search-icon pa"><i class="fa fa-search"></i></a>
            </div>
            <div class="searchTips pa dn">
                <div class="searchReferral dn">
                    <div class="searchRecent">
                        <p class="title">最近搜索</p>
                        <ul class="clearfix">
                            <li class="worker dib fl"><a href="javascript:void(0);"><span>大石头</span>CG</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">Eric Zhang</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                        </ul>
                    </div>
                    <div class="searchHot">
                        <p class="title">热门搜索</p>
                        <ul class="clearfix">
                            <li class="worker dib fl"><a href="javascript:void(0);">大石头CG</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">Eric Zhang</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                        </ul>
                    </div>
                </div>
                <div class="searchResult">
                    <ul class="d n">
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>123</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>designer</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>icon</a></li>
                        <li class="worker title">创作者</li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>CG</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>老师</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>老板</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>boss</a></li>
                    </ul>
                    <div class="checkMore tac d n">
                        <a href="javascript:void(0);">查看全部搜索结果<i class="fa fa-angle-double-right"></i></a>
                    </div>
                    <!--缺省提示-->
                    <div class="emptyInfo tac dn">
                        <p class="tips">暂未找到您想要查找的作,去<a href="MoreWorker.html">分类</a>查找更多作者吧!</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="SY-topRight fr">
            <ul class="clearfix">
                <li class="SY-create fr">
                    <a href="Post.html"><span>创作</span></a>
                </li>
                <li class="SY-userPic fr">
                    <a href="UserCenter.html">
                        <img class="br50" src="img/icons/person.png" alt="userPic">
                        <object><a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a></object>
                    </a>
                    <div class="pa tac fold">
                        <span class="pa trigon"></span>
                        <ul>
                            <li class="myPage"><a href="UserPageNew.html">我的研习社</a></li>
                            <li class="myPage"><a href="http://www.shenyecg.com" target="_blank">深夜学院</a></li>
                            <li class="authentication"><a href="CareerAuthen.html">深夜认证</a></li>
                            <li class="wallet"><a href="MyWallet.html">钱包</a></li>
                            <li class="setting"><a href="UserSetting.html">设置</a></li>
                            <li class="SY-exit">
                                <a href="javascript:void(0);"><i></i>退出</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="SY-regLog fr dn">
                    <a href="javascript:void(0);">注册</a>
                    <a href="javascript:void(0);">登录</a>
                </li>
                <li class="SY-notify fr">
                    <a href="Notify.html"><i></i><span class="num pa">99+</span></a>
                    <div class="pa fold">
                        <span class="pa trigon"></span>
                        <p class="topBox clearfix">
                            <span class="text fl">消息盒子</span>
                            <a href="javascript:void(0);" class="emptyBtn fr">清空</a>
                        </p>
                        <ul class="">
                            <li><a href="javascript:void(0);">[系统]管理员审核通过了你发表的原创作品《路人甲》</a></li>
                            <li><a href="javascript:void(0);">[私信]路人甲给你发来了1条私信</a></li>
                            <li><a href="javascript:void(0);">[通知]路人甲关注了你</a></li>
                        </ul>
                        <!--缺省提示-->
                        <div class="emptyInfo tac dn">
                            <p class="tips">暂无消息</p>
                        </div>
                        <div class="checkAll">
                            <a class="db tac" href="Notify.html">查看全部&nbsp;>></a>
                        </div>
                    </div>
                </li>
                <li class="fr line"></li>
                <li class="SY-focus dn fr">
                    <a href="UserCenter.html"><i></i><span>关注</span></a>
                </li>
                <li class="SY-Recruit fr">
                    <a href="Recruit.html"><i></i><span>招聘</span></a>
                    <span class="event db pa new"></span>
                </li>
                <li class="SY-piazza fr">
                    <a href="SquareNew.html"><i></i><span>广场</span></a>
                </li>
                <li class="SY-CG fr dn">
                    <a href="http://www.shenyecg.com" target="_blank"><i></i><span>学院</span></a>
                </li>
                <li class="SY-index fr dn">
                    <a href="Index.html"><i></i><span>首页</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--头部 结束-->
<!--主内容 开始-->
<div class="SY-content pr">
    <div class="SY-setContent">
        <!--视频直播-->
        <div class="SY-playingBox">
            <div class="wrap clearfix">
                <div class="SY-playing usn fl pr">
                    <!--播放器-->
                    <div class="SY-player dn">
                        <div class="play-mainBox pr">
                            <div class="play-cover" style="background-image:url('http://img.yxs.shenyecg.com/Image/ubvNxkRcHS840Krbq4ORbdTLCrnCKNam/yGCQyyJDza.jpg')"></div>
                            <!--遮罩层-->
                            <div class="coverLayer pa"></div>
                            <!--查看详情-->
                            <div class="checkDetail pa">
                                <a class="db transition btn tac" href="javascript:void(0);">查看详情</a>
                            </div>
                            <!--即将直播-->
                            <div class="livingSoon tac pa dn">
                                <p class="tips">即将直播</p>
                                <p class="tips">距离直播开始还剩<span class="day">26</span>天<span class="hours">23</span>小时<span class="minutes">45</span>分</p>
                            </div>
                        </div>
                        <!--播放器控制条-->
                        <div class="play-controlBar pa">
                            <div class="play-controlBg"></div>
                            <div class="play-controlBtns pa clearfix">
                                <div class="left-controlBtns fl clearfix">
                                    <!--播放按钮-->
                                    <div class="control-btn dib fl playBtn" style="display: block;"></div>
                                    <!--暂停按钮-->
                                    <div class="control-btn dib fl pauseBtn" style="display: none;"></div>
                                    <!--刷新按钮-->
                                    <div class="control-btn dib fl renewBtn"></div>
                                </div>
                                <div class="right-controlBtns fr clearfix">
                                    <!--查看详情-->
                                    <div class="dib fr checkDetail">
                                        <a class="db transition tac btn" href="javascript:void(0);">查看详情<i class="fa fa-angle-double-right"></i></a>
                                    </div>
                                    <!--退出全频播放-->
                                    <div class="control-btn dib fr normalScreen" style="display: none;"></div>
                                    <!--全频播放-->
                                    <div class="control-btn dib fr fullScreen" style="display: block;"></div>
                                    <!--选择视频清晰度-->
                                    <div class="dib playRate fr pr">
                                        <div class="rateNow">超清</div>
                                        <div class="playRateMenu pa d n">
                                            <span class="pa trigon"></span>
                                            <div class="rateItem active">超清</div>
                                            <div class="rateItem">高清</div>
                                            <div class="rateItem">标清</div>
                                        </div>
                                    </div>
                                    <!--调节音量-->
                                    <div class="dib fr volumeBtn pr">
                                        <div class="volumeBg"></div>
                                        <div class="volumeProgress pa">
                                            <div class="volumeBall pa br50"><span class="innerBall pa br50"></span></div>
                                        </div>
                                    </div>
                                    <!--音量 -> 关-->
                                    <div class="control-btn dib fr voiceCloseBtn" style="display: none;"></div>
                                    <!--音量 -> 开-->
                                    <div class="control-btn dib fr voiceOpenBtn" style="display: block;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--海报-->
                    <div class="SY-banner">
                        <div class="bannerList pr">
                            <a href="javascript:void(0);" class="banner pa" style="background-image:url('http://img.yxs.shenyecg.com/Image/ubvNxkRcHS840Krbq4ORbdTLCrnCKNam/yGCQyyJDza.jpg')"></a>
                            <a href="javascript:void(0);" class="banner pa" style="background-image:url('http://img.yxs.shenyecg.com/Image/P8vn2ccb0jAnU0SY5ghCqdJNNrHrm1Lo/Sk6CZe82GT.jpg')"></a>
                            <a href="javascript:void(0);" class="banner pa" style="background-image:url('http://img.yxs.shenyecg.com/Image/wjRmJyZaLAXBlZPBJyk8ssWdZbdiRazc/mTrCE6PiNw.jpg')"></a>
                            <a href="javascript:void(0);" class="banner pa" style="background-image:url('http://img.yxs.shenyecg.com/Image/Fz8sb8M4xTzvCqoT4djrDaxWHoECQ2Pb/PXNafhHdpY.jpg')"></a>
                            <a href="javascript:void(0);" class="banner pa" style="background-image:url('http://img.yxs.shenyecg.com/Image/Bs8UkHipuOX2LgyHSMy1T5Qe1mf2YzA4/YbB7QmjGpJ.jpg')"></a>
                            <a href="javascript:void(0);" class="banner pa" style="background-image:url('http://img.yxs.shenyecg.com/Image/qXrF1CYuI6FTTMtWZsXh4S7l9ZX1hWMJ/FwADFMd7ie.jpg')"></a>
                        </div>
                        <!--遮罩层-->
                        <div class="coverLayer pa dn"></div>
                        <!--查看详情-->
                        <div class="checkDetail pa">
                            <a class="db transition btn tac" href="javascript:void(0);">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="SY-playList fr br5">
                    <div class="item sy-video br5">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic br5" style="background-image:url('http://img.yxs.shenyecg.com/Image/ubvNxkRcHS840Krbq4ORbdTLCrnCKNam/yGCQyyJDza.jpg')"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-txt pa">
                                <span class="item-title pa toe">这是标题</span>
                                <div class="playIcon pa"><i class="fa fa-play-circle-o"></i></div>
                            </div>
                        </a>
                    </div>
                    <div class="item sy-living br5">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic br5" style="background-image:url('http://img.yxs.shenyecg.com/Image/P8vn2ccb0jAnU0SY5ghCqdJNNrHrm1Lo/Sk6CZe82GT.jpg')"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-txt pa">
                                <span class="item-title pa toe">这是标题</span>
                                <div class="livingIcon tac pa">
                                    <p class="icon"></p>
                                    <p class="text">正在直播</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="item sy-liveSoon br5">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic br5" style="background-image:url('http://img.yxs.shenyecg.com/Image/wjRmJyZaLAXBlZPBJyk8ssWdZbdiRazc/mTrCE6PiNw.jpg')"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-txt pa">
                                <span class="item-title pa toe">这是标题</span>
                                <div class="livingIcon tac pa">
                                    <p class="text">即将直播</p>
                                    <p class="text">还剩<span class="day">20</span>天<span class="hours">23</span>小时<span class="minutes">45</span>分</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="item sy-video br5">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic br5" style="background-image:url('http://img.yxs.shenyecg.com/Image/Fz8sb8M4xTzvCqoT4djrDaxWHoECQ2Pb/PXNafhHdpY.jpg')"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-txt pa">
                                <span class="item-title pa toe">这是标题</span>
                                <div class="playIcon pa"><i class="fa fa-play-circle-o"></i></div>
                            </div>
                        </a>
                    </div>
                    <div class="item sy-living br5">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic br5" style="background-image:url('http://img.yxs.shenyecg.com/Image/Bs8UkHipuOX2LgyHSMy1T5Qe1mf2YzA4/YbB7QmjGpJ.jpg')"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-txt pa">
                                <span class="item-title pa toe">这是标题</span>
                                <div class="livingIcon tac pa">
                                    <p class="icon"></p>
                                    <p class="text">正在直播</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="item sy-liveSoon br5">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic br5" style="background-image:url('http://img.yxs.shenyecg.com/Image/qXrF1CYuI6FTTMtWZsXh4S7l9ZX1hWMJ/FwADFMd7ie.jpg')"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-txt pa">
                                <span class="item-title pa toe">这是标题</span>
                                <div class="livingIcon tac pa">
                                    <p class="text">即将直播</p>
                                    <p class="text">还剩<span class="day">20</span>天<span class="hours">23</span>小时<span class="minutes">45</span>分</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <!--loading-->
                <div class="loading tac dn">
                    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                </div>
            </div>
        </div>
        <!-- 推荐作品 -->
        <div class="SY-recommendWork wrap br5">
            <div class="mainNav clearfix">
                <h2 class="title feb fl">推荐作品</h2>
                <a class="exchangeBtn fr" href="javascript:void(0);">换一换<i class="fa fa-rotate-left"></i></a>
            </div>
            <div class="recommendBox">
                <ul class="recommendList clearfix">
                    <li class="item re-video fl br5 border1">
                        <a class="item-pic transition db br5 pr" href="javascript:void(0);" style="background-image: url('http://img.yxs.shenyecg.com/Image/7lAOvgftYM8yYLQuEZI7IxzEQ4iHOUBD/B2DMMdAj4Q.jpg');">
                            <div class="playIcon pa"><i class="fa fa-play-circle-o"></i></div>
                            <div class="cover transition br5 pa"></div>
                        </a>
                        <div class="item-msg">
                            <div class="topBox clearfix">
                                <a href="javascript:void(0);" class="workName feb fl toe">这是该作品的名称</a>
                                <span class="mark fr pay">付费</span>
                            </div>
                            <div class="details clearfix">
                                <a href="javascript:void(0);" class="user-detail db fl">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </a>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="item re-living fl br5 border1">
                        <a class="item-pic transition db br5 pr" href="javascript:void(0);" style="background-image: url('http://img.yxs.shenyecg.com/Image/ubvNxkRcHS840Krbq4ORbdTLCrnCKNam/yGCQyyJDza.jpg');">
                            <div class="livingTips pa">
                                <!--正在直播-->
                                <div class="living tac">
                                    <p class="icon"></p>
                                    <p class="text">正在直播</p>
                                </div>
                            </div>
                            <div class="cover transition br5 pa"></div>
                        </a>
                        <div class="item-msg">
                            <div class="topBox clearfix">
                                <a href="javascript:void(0);" class="workName feb fl toe">这是该作品的名称</a>
                                <span class="mark fr free">免费</span>
                            </div>
                            <div class="details clearfix">
                                <a href="javascript:void(0);" class="user-detail db fl">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </a>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="item re-living fl br5 border1">
                        <a class="item-pic transition db br5 pr" href="javascript:void(0);" style="background-image: url('http://img.yxs.shenyecg.com/Image/jXnE9nZUDWbYkP8XulHOkexEOyZ3Ngff/wY4sNbhjFJ.jpg');">
                            <div class="cover transition br5 pa"></div>
                            <div class="livingTips pa">
                                <!--即将直播-->
                                <div class="liveSoon tac">
                                    <p class="text">即将直播</p>
                                    <p class="text">距离直播还剩<span class="day">25</span>天<span class="hours">23</span>小时<span class="minutes">45</span>分</p>
                                </div>
                            </div>
                        </a>
                        <div class="item-msg">
                            <div class="topBox clearfix">
                                <a href="javascript:void(0);" class="workName feb fl toe">这是该作品的名称</a>
                                <span class="mark fr pay">付费</span>
                            </div>
                            <div class="details clearfix">
                                <a href="javascript:void(0);" class="user-detail db fl">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </a>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="item fl br5 border1">
                        <a class="item-pic transition db br5 pr" href="javascript:void(0);" style="background-image: url('http://img.yxs.shenyecg.com/Image/UCc5a0RKXquiPa33blCYiOuL8D1FFyRG/6N5EGQR4zW.jpg');">
                            <div class="cover transition br5 pa"></div>
                        </a>
                        <div class="item-msg">
                            <div class="topBox clearfix">
                                <a href="javascript:void(0);" class="workName feb fl toe">这是该作品的名称</a>
                                <span class="mark fr free">免费</span>
                            </div>
                            <div class="details clearfix">
                                <a href="javascript:void(0);" class="user-detail db fl">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </a>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="item re-living fl br5 border1">
                        <a class="item-pic transition db br5 pr" href="javascript:void(0);" style="background-image: url('http://img.yxs.shenyecg.com/Image/gwM0VXojutfpDXPXjWM65aGtXV74Z0ek/tF2FB5G7WN.jpg');">
                            <div class="cover transition br5 pa"></div>
                            <div class="livingTips pa">
                                <!--正在直播-->
                                <div class="living tac">
                                    <p class="icon"></p>
                                    <p class="text">正在直播</p>
                                </div>
                            </div>
                        </a>
                        <div class="item-msg">
                            <div class="topBox clearfix">
                                <a href="javascript:void(0);" class="workName feb fl toe">这是该作品的名称</a>
                                <span class="mark fr free">免费</span>
                            </div>
                            <div class="details clearfix">
                                <a href="javascript:void(0);" class="user-detail db fl">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </a>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="item re-video fl br5 border1">
                        <a class="item-pic transition db br5 pr" href="javascript:void(0);" style="background-image: url('http://img.yxs.shenyecg.com/Image/z606eWthgRhkBlQLiYqiMRaTDQs6ynNy/tCPE4nG5xp.jpg');">
                            <div class="playIcon pa"><i class="fa fa-play-circle-o"></i></div>
                            <div class="cover transition br5 pa"></div>
                        </a>
                        <div class="item-msg">
                            <div class="topBox clearfix">
                                <a href="javascript:void(0);" class="workName feb fl toe">这是该作品的名称</a>
                                <span class="mark fr pay">付费</span>
                            </div>
                            <div class="details clearfix">
                                <a href="javascript:void(0);" class="user-detail db fl">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </a>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="item fl br5 border1">
                        <a class="item-pic transition db br5 pr" href="javascript:void(0);" style="background-image: url('http://img.yxs.shenyecg.com/Image/Zra8ge6whg7s7eVTfzg1jAqjaKbdRZxu/DCyBzXpGdd.jpg');">
                            <div class="cover transition br5 pa"></div>
                        </a>
                        <div class="item-msg">
                            <div class="topBox clearfix">
                                <a href="javascript:void(0);" class="workName feb fl toe">这是该作品的名称</a>
                                <span class="mark fr pay">付费</span>
                            </div>
                            <div class="details clearfix">
                                <a href="javascript:void(0);" class="user-detail db fl">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </a>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="item re-video fl br5 border1">
                        <a class="item-pic transition db br5 pr" href="javascript:void(0);" style="background-image: url('http://img.yxs.shenyecg.com/Image/PXDgEHnfVLHTqS8MdQjSqxDXVf6kDXcJ/XWHfJNECtP.jpg');">
                            <div class="playIcon pa"><i class="fa fa-play-circle-o"></i></div>
                            <div class="cover transition br5 pa"></div>
                        </a>
                        <div class="item-msg">
                            <div class="topBox clearfix">
                                <a href="javascript:void(0);" class="workName feb fl toe">这是该作品的名称</a>
                                <span class="mark fr free">免费</span>
                            </div>
                            <div class="details clearfix">
                                <a href="javascript:void(0);" class="user-detail db fl">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </a>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!--loading-->
                <div class="loading tac dn">
                    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                </div>
            </div>
        </div>
        <!-- 精品合集 -->
        <div class="SY-recommendAlbum wrap br5">
            <div class="mainNav">
                <h2 class="title feb">精品合集</h2>
            </div>
            <div class="albumBox">
                <ul class="albumList clearfix">
                    <li class="item fl">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic transition" style="background-image:url('https://cdnb.artstation.com/p/assets/images/images/009/537/563/smaller_square/yang-tian-pansen.jpg?1519569817');"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-msg pa clearfix">
                                <h2 class="albumName toe">这是该合集的名称</h2>
                                <div class="user-detail fl clearfix">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </div>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item fl">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic transition" style="background-image:url('http://img.yxs.shenyecg.com/Image/YnCyp07dIvRz2rYwz4HFJE9sxR2pp1CR/MYbFsK7ZAi.jpg');"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-msg pa clearfix">
                                <h2 class="albumName toe">这是该合集的名称</h2>
                                <div class="user-detail fl clearfix">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </div>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item fl">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic transition" style="background-image:url('https://cdnb.artstation.com/p/assets/images/images/009/544/439/smaller_square/baatr-kotinov-.jpg?1519595974');"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-msg pa clearfix">
                                <h2 class="albumName toe">这是该合集的名称</h2>
                                <div class="user-detail fl clearfix">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </div>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item fl">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic transition" style="background-image:url('http://img.yxs.shenyecg.com/Image/GU5ZX4UfdpBsuue45ntTt9ROci8iGAwE/2F8TPDdJrP.jpg');"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-msg pa clearfix">
                                <h2 class="albumName toe">这是该合集的名称</h2>
                                <div class="user-detail fl clearfix">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </div>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item fl">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic transition" style="background-image:url('http://img.yxs.shenyecg.com/Image/47dWz3gCuTRlkUArqJc4IzVGyybCdxtB/8k7mwRb63W.jpg');"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-msg pa clearfix">
                                <h2 class="albumName toe">这是该合集的名称</h2>
                                <div class="user-detail fl clearfix">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </div>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item fl">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic transition" style="background-image:url('http://img.yxs.shenyecg.com/Image/LNALBSqKgx7UUgyDLyDK5PFhfPxAARUV/ChBf38iddA.jpg');"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-msg pa clearfix">
                                <h2 class="albumName toe">这是该合集的名称</h2>
                                <div class="user-detail fl clearfix">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </div>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item fl">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic transition" style="background-image:url('http://img.yxs.shenyecg.com/Image/D4mzDy8vWFOdjMj635sXriTBjI2R0cd3/Tjmw2Y8mym.jpg');"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-msg pa clearfix">
                                <h2 class="albumName toe">这是该合集的名称</h2>
                                <div class="user-detail fl clearfix">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </div>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item fl">
                        <a class="db br5 pr" href="javascript:void(0);">
                            <div class="item-pic transition" style="background-image:url('http://img.yxs.shenyecg.com/Image/51Y3AZ6jiN0djgALEY6Ca3FEMjvYrvL2/w38M6wEkKb.jpg');"></div>
                            <div class="cover transition br5 pa"></div>
                            <div class="item-msg pa clearfix">
                                <h2 class="albumName toe">这是该合集的名称</h2>
                                <div class="user-detail fl clearfix">
                                    <div class="avatar br50 fl">
                                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                    </div>
                                    <p class="nickName fl toe">这是该作者的昵称</p>
                                </div>
                                <div class="society fr">
                                    <p class="scan dib"><i class="fa fa-eye"></i><span class="num">200</span></p>
                                    <p class="comment dib"><i class="fa fa fa-commenting"></i><span class="num">350</span></p>
                                    <p class="thumbUp dib"><i class="fa fa-thumbs-o-up"></i><span class="num">300</span></p>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!--loading-->
                <div class="loading tac dn">
                    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                </div>
            </div>
        </div>
        <!-- 推荐创作者 -->
        <div class="SY-recommendAuthor wrap br5">
            <div class="mainNav clearfix">
                <h2 class="title feb fl">推荐创作者</h2>
                <a class="exchangeBtn fr" href="javascript:void(0);">换一换<i class="fa fa-rotate-left"></i></a>
            </div>
            <div class="authorBox">
                <ul class="authorList clearfix">
                    <li class="item transition fl">
                        <a class="db tac" href="javascript:void(0);">
                            <div class="avatar br50">
                                <img class="br50" src="http://img.shenyecg.com/Content/defaultPic/userPic/pig.png" alt="">
                            </div>
                            <h2 class="nickName toe">这是该创作者的昵称</h2>
                            <p class="subhead toe">这是该创作者的签名</p>
                            <div class="datas">
                                <p class="subscript dib">订阅<span class="num">999</span></p>
                                <p class="follow dib">关注<span class="num">92</span></p>
                                <p class="works dib">作品<span class="num">368</span></p>
                            </div>
                            <div class="description tal">
                                这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述
                            </div>
                        </a>
                    </li>
                    <li class="item transition fl">
                        <a class="db tac" href="javascript:void(0);">
                            <div class="avatar br50">
                                <img class="br50" src="http://img.shenyecg.com/Content/defaultPic/userPic/pig.png" alt="">
                            </div>
                            <h2 class="nickName toe">这是该创作者的昵称</h2>
                            <p class="subhead toe">这是该创作者的签名</p>
                            <div class="datas">
                                <p class="subscript dib">订阅<span class="num">999</span></p>
                                <p class="follow dib">关注<span class="num">92</span></p>
                                <p class="works dib">作品<span class="num">368</span></p>
                            </div>
                            <div class="description tal">
                                这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述
                            </div>
                        </a>
                        <span class="line"></span>
                    </li>
                    <li class="item transition fl">
                        <a class="db tac" href="javascript:void(0);">
                            <div class="avatar br50">
                                <img class="br50" src="http://img.shenyecg.com/Content/defaultPic/userPic/pig.png" alt="">
                            </div>
                            <h2 class="nickName toe">这是该创作者的昵称</h2>
                            <p class="subhead toe">这是该创作者的签名</p>
                            <div class="datas">
                                <p class="subscript dib">订阅<span class="num">999</span></p>
                                <p class="follow dib">关注<span class="num">92</span></p>
                                <p class="works dib">作品<span class="num">368</span></p>
                            </div>
                            <div class="description tal">
                                这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述
                            </div>
                        </a>
                        <span class="line"></span>
                    </li>
                    <li class="item transition fl">
                        <a class="db tac" href="javascript:void(0);">
                            <div class="avatar br50">
                                <img class="br50" src="http://img.shenyecg.com/Content/defaultPic/userPic/pig.png" alt="">
                            </div>
                            <h2 class="nickName toe">这是该创作者的昵称</h2>
                            <p class="subhead toe">这是该创作者的签名</p>
                            <div class="datas">
                                <p class="subscript dib">订阅<span class="num">999</span></p>
                                <p class="follow dib">关注<span class="num">92</span></p>
                                <p class="works dib">作品<span class="num">368</span></p>
                            </div>
                            <div class="description tal">
                                这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述这是该作者的自我描述
                            </div>
                        </a>
                        <span class="line"></span>
                    </li>
                </ul>
                <!--loading-->
                <div class="loading tac dn">
                    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<!--主内容 结束-->
<!--页脚 开始-->
<div class="SY-footer">
    <div class="SY-foot clearfix">
        <div class="aboutUs fl">
            <div class="logoBox">
                <img src="img/icons/bottomLogo.png" alt="">
                <p class="dib slogin">深夜研习社</p>
                <span class="line dib"></span>
                <p class="dib text">知识应该受到尊重</p>
            </div>
            <div class="connectUs">
                <p class="text dib">联系我们:<span class="phoneNumer dib">027-62438159</span></p>
                <a href="javascript:void(0);" class="tencent linkIcon"></a>
            </div>
        </div>
        <div class="msgDetail fr clearfix">
            <ul class="iconList fr">
                <li class="pr">
                    <span class="wechat linkIcon"></span>
                    <div class="weChatCode tac pa">
                        <i class="icon-arrow-down pa"></i>
                        <p class="scan">扫描二维码</p>
                        <p class="text">关注微信公众号</p>
                        <img src="img/icons/WeChatCode.jpg" alt="">
                    </div>
                </li>
                <li><a href="javascript:void(0);" class="sina linkIcon"></a></li>
            </ul>
            <dl class="fr">
                <dt><a href="HelpCenter.html">关于我们</a></dt>
            </dl>
            <dl class="fr">
                <dt><a href="HelpCenter.html">服务条款</a></dt>
            </dl>
            <dl class="fr">
                <dt><a href="HelpCenter.html">版权申明</a></dt>
            </dl>
            <dl class="fr">
                <dt><a href="HelpCenter.html">常见问题</a></dt>
            </dl>
            <p class="recordNumber"><a href="javascript:void(0);">Copyright&copy; www.shenyecg.com 2017 | 鄂ICP备16021987号-1</a></p>
        </div>
    </div>
</div>
<!--页脚 结束-->
<script src="js/jquery.min.js"></script>
<script src="js/search.js"></script>
<script>
    $(function () {
        //轮播
        var playListItem = $(".SY-playingBox .SY-playList");
        var playListNum = playListItem.children().length;
        var bannerListItem = $(".SY-playingBox .SY-banner .bannerList .banner");

        //手动控制轮播效果
        bannerListItem.eq(0).show().siblings().hide();
        playListItem.find(".item").eq(0).addClass("active");
        playListItem.find(".item").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var this_index = $(this).index();
            s = this_index;
            bannerListItem.eq(this_index).fadeIn(300).siblings().fadeOut(300);
        });

        //定时器
        var s = 0;
        var time = setInterval(slider,6000);

        //自动轮播
        function slider() {
            s++;
            if(s == playListNum) {
                s = 0;
            }
            playListItem.find(".item").eq(s).addClass("active").siblings().removeClass("active");
            bannerListItem.eq(s).fadeIn(300).siblings().fadeOut(300);
        }

        //鼠标悬浮，停止轮播
        $(".SY-playingBox .SY-banner").hover(function () {
            clearInterval(time);
            time = null;
        },function () {
            if(time != null) return;
            time = setInterval(slider, 6000);
        });

    })
</script>
</body>
</html>